<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>管理系统</title>
    <link rel="stylesheet" href="css/fontawesome.min.css" />
    <link rel="stylesheet" href="app.css" />
</head>

<body>
    <!-- 浮动菜单 -->
    <div class="floating-menu" id="floatingMenu">
        <div class="floating-menu-content" id="floatingMenuContent">
            <!-- 浮动菜单内容将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 右键菜单-tabs -->
    <div class="context-menu" id="contextMenu">
        <div class="context-menu-item" id="menuRefresh">
            <i class="fas fa-redo menu-icon"></i>
            <span>刷新当前</span>
        </div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" id="menuCloseCurrent">
            <i class="fas fa-times menu-icon"></i>
            <span>关闭当前</span>
        </div>
        <div class="context-menu-item" id="menuCloseOther">
            <i class="fas fa-times-circle menu-icon"></i>
            <span>关闭其他</span>
        </div>
        <div class="context-menu-item" id="menuCloseAll">
            <i class="fas fa-trash-alt menu-icon"></i>
            <span>关闭全部</span>
        </div>
    </div>

    <!-- App的容器 -->
    <div class="app-container">
        <!-- 左侧边栏 -->
        <div class="sidebar-container">
            <!-- 品牌 -->
            <div class="brand-container">
                <div class="brand-content">
                    <i class="fas fa-tachometer-alt brand-icon"></i>
                    <span class="brand-text">管理系统</span>
                </div>
            </div>

            <!-- 菜单 -->
            <div class="menu-container">
                <!-- 一级菜单 -->
                <div class="primary-menu">
                    <div class="primary-menu-items">
                        <!-- 一级菜单内容将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 二级菜单 -->
                <div class="secondary-menu">
                    <div class="secondary-menu-items">
                        <!-- 二级菜单内容将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="content-container">
            <!-- 顶部导航栏 -->
            <div class="content-header">
                <div class="content-header-left">
                    <div class="tab-container">
                        <button class="scroll-button hidden" id="scrollLeftButton" type="button">
                            <i class="fas fa-chevron-left"></i>
                        </button>

                        <div class="scroll-viewport" id="scrollViewport">
                            <div class="tab-items" id="tabItems">
                                <!-- 标签将通过JavaScript动态生成 -->
                            </div>
                        </div>

                        <button class="scroll-button hidden" id="scrollRightButton" type="button">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <div class="content-header-right">
                    <button class="toolbar-button" id="fullscreenButton" type="button" title="全屏">
                        <i class="fas fa-expand"></i>
                    </button>

                    <div class="user-dropdown">
                        <button class="user-dropdown-btn" id="userDropdownButton" type="button">
                            <div class="user-avatar">
                                <i class="fa fa-user"></i>
                            </div>
                            <span class="button-text">管理员</span>
                            <i class="fas fa-chevron-down dropdown-arrow"></i>
                        </button>
                        <div class="user-dropdown-menu">
                            <a class="user-dropdown-item" href="#" id="userProfile">
                                <i class="fas fa-user-cog item-icon"></i>
                                <span>我的账户</span>
                            </a>
                            <a class="user-dropdown-item" href="#" id="changePwd">
                                <i class="fas fa-key item-icon"></i>
                                <span>修改密码</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="user-dropdown-item" href="#" id="userLogout">
                                <i class="fas fa-sign-out-alt item-icon"></i>
                                <span>退出登录</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab内容区域 -->
            <div class="content-panels" id="tabPanels">
                <!-- 标签内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    <script src="utils.js"></script>
    <script src="data.js"></script>
    <script src="menu.js"></script>
    <script src="tabs.js"></script>
    <script src="tool.js"></script>
    <script src="app.js"></script>
</body>

</html>